import React, { Component } from 'react';
import Header from '../../components/Header/Header'
import { Tabs } from 'antd-mobile'
import "./Coupon.less"
import { reqgetcoupon } from '../../http/api'

class Coupon extends Component {
    constructor() {
        super()
        this.state = {
            topNav: ["未使用", "已使用", "已失效"],
            couponList: [],
            n: 0
        }
    }
    async componentDidMount() {
        let res = await reqgetcoupon()
        if (res.data.code === 200) {
            this.setState({
                couponList: res.data.list ? res.data.list : []
            })

        }
    }

    render() {
        let { topNav, couponList } = this.state
        return (
            <div className='coupon'>
                {/* <div>{JSON.stringify(couponList[0])}</div> */}
                {/* 头部 */}
                <Header back title="优惠券"></Header>
                {/* tab切换栏 */}
                <Tabs>
                    {topNav.map((item, index) => {
                        return <Tabs.Tab title={item} key={index}></Tabs.Tab>
                    })}
                </Tabs>
                {/* 优惠券 */}
                <ul className='coupon_all'>
                    {couponList.map((item) => {
                        return (item.content.map((i) => {
                            return (
                                <li className='coupon_all_item' key={i.id}>
                                    <div className='coupon_all_item_top'>
                                        <div className='coupon_all_item_top_left'>
                                            <p>￥{i.money}</p>
                                            <p>满{i.limit_money}可用</p>
                                        </div>
                                        <div className='coupon_all_item_top_right'>
                                            <h3>{i.title}</h3>
                                            {Number(i.endtime)<= new Date().getTime()? <del>已过期</del>:<span>{
                                               Math.floor((Number(i.endtime)-new Date().getTime())/1000/60/60/24)
                                                }天{ Math.floor((Number(i.endtime)-new Date().getTime())/1000/60/60%24)}时
                                                后到期</span>}              
                                        </div>
                                    </div>
                                    <div className='coupon_all_item_button'>
                                        {i.description}
                                    </div>
                                </li>
                            )
                        }))

                    })}

                </ul>
            </div>
        )
    }
}

export default Coupon;